'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { TrendingUp, TrendingDown, Activity } from 'lucide-react'
import { formatCurrency } from '@/lib/utils'

interface MarketOverviewProps {
  symbol: string
  timeframe: string
  data: any
}

export function MarketOverview({ symbol, timeframe, data }: MarketOverviewProps) {
  const currentPrice = data?.current_price || 0
  const priceChange = data?.price_change_24h || 0
  const priceChangePercent = data?.price_change_percentage_24h || 0
  const volume = data?.volume_24h || 0
  const marketCap = data?.market_cap || 0

  const isPositive = priceChange >= 0

  return (
    <div className="grid gap-4 md:grid-cols-4">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            {symbol} Price
          </CardTitle>
          <Activity className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(currentPrice)}</div>
          <p className={`text-xs ${isPositive ? 'text-green-600' : 'text-red-600'}`}>
            {isPositive ? '+' : ''}{priceChange.toFixed(2)} ({priceChangePercent.toFixed(2)}%)
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            24h Volume
          </CardTitle>
          <TrendingUp className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(volume)}</div>
          <p className="text-xs text-muted-foreground">
            24h trading volume
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            Market Cap
          </CardTitle>
          <TrendingDown className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{formatCurrency(marketCap)}</div>
          <p className="text-xs text-muted-foreground">
            Total market capitalization
          </p>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">
            Current Signal
          </CardTitle>
          <Activity className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-blue-600">BUY</div>
          <p className="text-xs text-muted-foreground">
            Confidence: 78%
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
